<template>
	<NavCustom/>
	<swiper :indicator-dots="true" >
		<swiper-item v-for="item in 3">
			<view class="swiper-item">
				<image src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/86380041b3c46c33/84fd79a26a29eaea.jpg" mode="aspectFill"></image>
			</view>
		</swiper-item>
	</swiper>
	<HomeTitle name="本季推荐" en="Seasonal Recommend" :hasMore="false"/>
	<scroll-view scroll-x="true">
		<view class="flex recommend">
			<image mode="heightFix" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/b9d378e1be959376/d943a30b6ebdaa1a.jpg"></image>
			<image mode="heightFix" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/384958756aa24c39/a79e9f22046ab26c.jpg"></image>
			<image mode="heightFix" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/e06c45a0d13fa946/681400bc21dee76a.jpg"></image>
		</view>
	</scroll-view>
	<HomeTitle></HomeTitle>
	<image class="title-img" src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/002d8ec99b74dccd/15c31d4729a3eecc.jpg" mode="widthFix"></image>
	<view class="cake-list flex flex-wrap justify-between">
		<CakeItem  v-for="item in cakeList" :gdata="item"/>
	</view>
	<CakePopup/>
</template>

<script setup>
import { computed, ref } from "vue";
import { cakeGet } from '../../api/cake';
import HomeTitle from '../../components/home-title.vue'

const cakeList = ref([])
cakeGet().then(res=>{
	cakeList.value = res.data.results
})
</script>

<style lang="scss">
swiper{
	height: 700upx;
	swiper-item{
		height: 700upx;
		image{
			width: 750upx;
			height: 700upx;
		}
	}
}
.recommend{
	image{
		flex-shrink: 0;
		height: 300upx
	}
}
.title-img{
	width: 100%;
}
</style>
